import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import {
  Card,
  Breadcrumb,
  Form,
  Input,
  Space,
  Button,
  Upload,
  Radio,
  Modal,
  message,
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
// 导入公共的频道组件
import Channel from '@/components/Channel'
// 导入在线文本编辑器
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import styles from './index.module.scss'
import { modules } from '@/utils/config'
import { baseURL } from '@/utils/request'
import { addAritcle, getArticleByIdApi, updateArticle } from '@/api/articles'
export default class Publish extends Component {
  state = {
    type: 1, // 控制将来可以上传几张图片
    // 最终上传的文件保存在此对象
    fileList: [],
    // 控制预览模态框的显示和隐藏
    showPreview: false,
    // 预览图片的URL地址
    previewUrl: '',
    // 频道id
    channel_id: null,
    // 文章id
    id: this.props.location.pathname.split('/')[3],
  }
  // 获取组件对象
  addRef = React.createRef()

  // 获取某个id对应的新闻数据
  getArticleById = async (id) => {
    const { data } = await getArticleByIdApi(id)
    // 准备要回显的数据
    const initData = { ...data, type: data.cover.type }
    // 给表单的默认选项设置该id对应的数据即可(数据回显)
    this.addRef.current.setFieldsValue(initData)
    // 修改显示的图片
    this.setState({
      fileList: data.cover.images.map((item) => ({ url: item })),
    })
  }

  componentDidMount() {
    if (this.state.id) {
      // 修改操作
      this.getArticleById(this.state.id)
    }
  }

  render() {
    const { type, fileList, showPreview, previewUrl, id } = this.state
    return (
      <div className={styles.root}>
        <Card
          title={
            <Breadcrumb separator=">">
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>{id ? '修改' : '发布'}文章</Breadcrumb.Item>
            </Breadcrumb>
          }
        >
          <Form
            ref={this.addRef}
            labelCol={{ span: 4 }}
            validateTrigger={['onChange', 'onBlur']}
            onFinish={this.onFinish}
            // 表单的初始值
            initialValues={{ type: 1 }}
          >
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: '文章的标题不能为空' }]}
            >
              <Input
                placeholder="请输入文章标题"
                style={{
                  width: 400,
                }}
              />
            </Form.Item>
            <Form.Item
              label="频道"
              name="channel_id"
              rules={[{ required: true, message: '请选择频道' }]}
            >
              <Channel></Channel>
            </Form.Item>
            {/* 图片上传数量控制 */}
            <Form.Item label="封面" name="type">
              <Radio.Group onChange={this.changeType}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {/* 图片上传 */}
            <Form.Item wrapperCol={{ offset: 4 }}>
              {type > 0 && (
                <Upload
                  name="image"
                  listType="picture-card"
                  // 上传图片的服务器的地址
                  action={`${baseURL}upload`}
                  // fileList就是控制上传图片的显示
                  fileList={fileList}
                  // 文件上传
                  onChange={this.uploadImg}
                  // 图片预览
                  onPreview={this.previewImg}
                  // 图片格式校验
                  beforeUpload={this.beforeUpload}
                >
                  {/* 控制允许上传的图片的张数：实际就是控制+按钮是否能显示 */}
                  {fileList.length < type && <PlusOutlined />}
                </Upload>
              )}
            </Form.Item>
            {/* 在线文本编辑器 */}
            <Form.Item
              label="内容"
              name="content"
              rules={[{ required: true, message: '文章的内容不能为空' }]}
            >
              <ReactQuill
                theme="snow"
                placeholder="请输入文章内容"
                modules={modules}
              ></ReactQuill>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button type="primary" htmlType="submit" size="large">
                  {id ? '修改' : '发布'}文章
                </Button>
                <Button onClick={this.addDraft} size="large">
                  存入草稿
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
        <Modal
          open={showPreview}
          title="图片预览"
          footer={null}
          // 关闭模态框时触发
          onCancel={() => {
            this.setState({
              showPreview: false,
              previewUrl: '',
            })
          }}
        >
          <img alt="example" style={{ width: '100%' }} src={previewUrl} />
        </Modal>
      </div>
    )
  }
  // 更改上传图片的张数
  changeType = (e) => {
    this.setState({
      type: e.target.value,
      // 切换type时，重新上传图片
      fileList: [],
    })
  }

  // 图片上传前的校验
  beforeUpload = (file) => {
    // 判断图片的大小 不能超过 500k
    if (file.size > 1024 * 500) {
      message.warn('上传的文件不能超过500kb')
      // 阻止图片上传并在预览区显示
      return Upload.LIST_IGNORE
    }
    // 只允许上传图片
    if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
      message.warn('只能上传png或者jpg图片')
      return Upload.LIST_IGNORE
    }
  }

  // 上传图片
  uploadImg = ({ fileList: newFileList }) => {
    this.setState({
      fileList: newFileList,
    })
  }

  // 预览图片
  previewImg = (file) => {
    // 获取上传的图片的url
    let url = file.url || file.response.data.url
    // 设置预览图片的URL地址
    this.setState({
      showPreview: true,
      previewUrl: url,
    })
  }

  // 公共的验证和入库方法
  submit = async (values, draft) => {
    // 上传图片的验证
    if (values.type !== this.state.fileList.length) {
      return message.warn('上传的图片数量不正确')
    }
    const images = this.state.fileList.map((item) => {
      return item.url || item.response.data.url
    })
    // 组装要添加的数据
    const data = {
      ...values,
      cover: {
        type: values.type,
        images,
      },
    }
    try {
      // 发请求
      if (this.state.id) {
        // 把修改的id存入data中
        data.id = this.state.id
        // 修改操作
        await updateArticle(data, draft)
        message.success('修改成功')
      } else {
        await addAritcle(data, draft)
        message.success('添加成功')
      }
      this.props.history.push('/home/article')
    } catch (err) {
      console.log(err)
    }
  }

  // 表单数据直接提交
  onFinish = (values) => {
    this.submit(values, false)
  }

  // 存草稿
  addDraft = async () => {
    // 也需要表单校验,调用表单对象的validateFields()
    const values = await this.addRef.current.validateFields()
    this.submit(values, true)
  }
}
